<template>
  <div class="foot-wrapper">
    <input 
      v-model="msg" 
      class="chat-input" 
      type="text" 
      name="" 
      :placeholder="getmsg"
      @keyup.enter="send(msg)"
    >
    <span 
      class="chat-sub" 
      :class="{'primary':!!msg}" 
      :placeholder="getroom" 
      @click="send(msg)"
    >发送</span>
  </div>
</template>

<script>
  import CHAT from '../../api/wsclient';
  import { mapMutations, mapGetters, mapState } from 'vuex';

  export default {
    props: ['roomid', 'choose'],
    data () {
      return {
        msg: ''
      };
    },
    mounted () {
    },
    computed: {
      ...mapState(['user']),
      getroom () {
        if (CHAT.socket) {
          CHAT.join(this.roomid);
        } else if (this.roomid) {
          CHAT.init(this.roomid);
        }
      },
      getmsg () {
        if (this.choose) {
          this.msg = '@' + this.choose.name + '  ';
        }
      }
    },
    methods: {
      send (msg) {
        CHAT.submit(msg);
        this.msg = '';
        this.$emit('send');
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='less'>
  .foot-wrapper {
    background-color: #f1f1f1;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    padding: 5px 10px;
    justify-content: space-between;
    border-top: solid 1px rgba(0, 0, 0, 0.1);

  .chat-input {
    height: 100%;
    width: 80%;
    border-radius: 10px;
    outline: none;
    border: none;
    box-sizing: border-box;
    padding: 5px;
  }

  .chat-sub {
    display: flex;
    background-color: rgba(0, 0, 0, 0.1);
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 18%;
    border-radius: 10px;
    outline: none;
  }

  .primary {
    background-color: #3CAF36;
  }

  }
</style>
